<template>
  <el-form size="small">
    <div class="reviewTitle flex_start mb20">
      <div class="">评审部门和评审人员</div>
      <el-button type="primary" size="mini" class="el-icon-circle-plus-outline ml10" plain @click="addpinshen">增加</el-button>
      <div class="reviewText ml10">按照添加顺序签名</div>
    </div>
    <div class="reviewCon" v-for="(item, i) in userList" :key="i">
      <div class="reviewList flex_start mb20">
        <div class="reviewNum">{{ i + 1 }}</div>
        <el-form-item label="评审部门:" required class="ml30 " style="padding-top: 20px;">
          <el-cascader
            v-model="item.reviewDeptId"
            placeholder="请选择"
            ref="newdeptitem"
            :options="deptOption"
            :show-all-levels="false"
            :props="{
              value: 'id',
              label: 'deptName',
              emitPath: false,
              checkStrictly: true
            }"
            filterable
            @change="getMemberOptionitem($event, i)"
          ></el-cascader>
        </el-form-item>
        <el-form-item label="评审人员:" required class="ml30" style="padding-top: 20px;">
          <el-select filterable placeholder="请选择" v-model="item.reviewUserid" @change="pinshenChange($event, item)">
            <el-option v-for="v in item.memberOption" :key="v.id" :value="v.id" :label="v.name"></el-option>
          </el-select>
        </el-form-item>
        <i class="el-icon-delete f16 error_f ml30" @click="delpinshen(index, i)"></i>
      </div>
    </div>
  </el-form>
</template>

<script>
import { getuserByDept } from '@/api/myapi/common';
export default {
  props:{
    deptOption:[]
  },
  data() {
    return {
      userList: [{
        reviewDeptName:'',
        reviewDeptId:'',
        reviewUserid:'',
        reviewUserName:'',
        memberOption:[]
      }]
    };
  },
  created() {},
  methods: {
    setUserList(array){
        this.userList=array;
      this.userList.forEach(item=>{
        this.getuserByDept(item.reviewDeptId,item);
      })
    },
    pinshenChange(id,item) {
      let form = item.memberOption.find(e => e.id == id);
      this.$set(item,'reviewUserName',form.name)
    },
    //   通过部门查用户
    getuserByDept(val,item){
      getuserByDept({
        deptId: val
      }).then(({ data }) => {
        if (data && data.success) {
          this.$set(item,'memberOption',data.data)
        }
      });
    },
    getMemberOptionitem(val,i) {
      let dept = this.$refs.newdeptitem[i].getCheckedNodes();
      this.userList[i].reviewDeptName = dept[0].label;
      this.userList[i].reviewUserid = '';
      this.userList[i].reviewUserName = '';
      this.getuserByDept(val,this.userList[i]);

    },
    // 添加评审
    addpinshen(index) {
      this.userList.push({
       reviewDeptName:'',
       reviewDeptId:'',
       reviewUserid:'',
       reviewUserName:'',
       memberOption:[]
      });
    },
    delpinshen(index, i) {
      this.userList.splice(i, 1);
    }
  }
};
</script>

<style scoped>
.reviewTitle {
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 0px;
  color: #606366;
  opacity: 1;
  margin-top: 30px;
}
.reviewText {
  font-size: 12px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  line-height: 18px;
  color: #909499;
  opacity: 1;
}

.reviewList {
  background: #ffffff;
  border: 1px dashed #e4e8ed;
  opacity: 1;
  border-radius: 0px;
  padding: 15px;
  height: 34px;
}
</style>
